<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>13表格练习</title>
    <link rel="stylesheet" href="./css/Element-ui.css" />
  </head>
  <body>
    <div id="app">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="province" label="省份或直辖市"></el-table-column>
        <el-table-column prop="city" label="市区"></el-table-column>
        <el-table-column prop="address" label="详细地址"></el-table-column>
        <el-table-column prop="zip" label="邮编"></el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button x="remove" @click="button(x)">移除</el-button>
            <el-button x="check">查看</el-button>
            <el-button x="edit">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script src="./js/Element-ui.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: {
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海市",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            zip: 200333,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海市",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1517 弄",
            img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            zip: 200333,
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海市",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1519 弄",
            img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            zip: 200333,
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            province: "上海市",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1516 弄",
            img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            zip: 200333,
          },
        ],
      },
      methods: {
        button(x) {
          switch (x) {
            case "remove":
              this.$message.success("You click remove button");
              break;
            case "edit":
              this.$message.warning("You click edit button");
              break;
            case "check":
              this.$message.error("You click check button");
              break;
          }
        },
      },
    });
  </script>
</html>
